<template>
	<div class="sc_ection">
		<div class="section_title">
			<div class="title-left">
				<img class="img" :src="imgUrl" alt="" />
				<div class="title">{{ title }}</div>
			</div>
			<div class="title-right">
				<slot name="title-end"></slot>
			</div>
		</div>
		<div class="app-section__body">
			<slot></slot>
		</div>
	</div>
</template>
<script setup>
import { defineProps } from "vue"
import img from "../../assets/images/222.png"

const props = defineProps({
	title: {
		type: String,
		require: true,
		default: () => "资源数据"
	},
	imgUrl: {
		type: String,
		require: true,
		default: () => img
	}
})
</script>

<style lang="scss">
.sc_ection {
	background-color: #fff;
	border: 1px solid #dbdde4;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	.section_title {
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 20px;
		border-bottom: 1px solid #dbdde4;
		.title-left {
			display: flex;
			align-items: center;
			.img {
				width: 18px;
				height: 18px;
				margin-right: 9px;
			}
			.title {
				font-size: 16px;
				font-weight: 500;
				color: #333333;
			}
		}
	}
	.app-section__body {
		flex: 1;
	}
}
</style>
